<template>
  <DownOutlined class="collapse-icon" />
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  expand: { type: Boolean },
});

/**
 * @description 展开/收起 图标旋转转数
 */
const turn = computed(() => `${props.expand ? 0 : 0.5}turn`);
</script>

<style lang="less" scoped>
.collapse-icon {
  transform: rotate(v-bind(turn));
  transition: transform 0.3s;
}
</style>
